<template>
  <el-container class="exchange">
    <el-main>
      <div class="card-list">
        <el-card shadow="never">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="页面名称：">
                  <el-input />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <SearchButton />
              </el-col>
            </el-row>

          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar :refresh="{query: getList1}">
            <template v-slot:buttons>
              <el-button type="primary" icon="el-icon-plus" @click="openDialog()">批量生成</el-button>
              <el-button type="success" icon="el-icon-upload" @click="synchronizePageList('1')">同步页面</el-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            ref="xTree"
            border
            row-key
            resizable
            highlight-hover-row
            :auto-resize="true"
            :data="list"
            width
            max-height="500"
            row-id="id"
            highlight-current-row
            text-algin="center"
            :print-config="{}"
            header-align="center"
          >
            <vxe-table-column type="checkbox" width="50" align="center" />
            <vxe-table-column field="campaignName" min-width="200" align="center" title="系统页面" />
            <vxe-table-column field="validTime" width="180" align="center" title="有效时间" />
            <vxe-table-column field="appletURL" width="280" align="center" title="小程序链接" />
            <vxe-table-column field="h5ShortUrl" width="280" align="center" title="H5短链接" />
            <vxe-table-column field="h5LongUrl" width="280" align="center" title="H5长链接" />
            <vxe-table-column field="createTime" width="150" align="center" title="生成时间" />
            <vxe-table-column
              title="操作"
              fixed="right"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <div class="drag-btn">
                  <el-button type="text" size="mini" @click="openDialog(scope.row)">添加参数</el-button>
                  <el-button type="text" size="mini" @click="openDialog(scope.row)">生成链接</el-button>
                </div>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getList()"
          />
        </el-card>
      </div>
      <el-dialog width="30%" :close-on-click-modal="false" :modal="false" :visible.sync="dialogVisible" title="链接生成">
        <el-form ref="ruleForm" :model="params" label-width="7rem" :rules="rules">
          <el-row :gutter="40">
            <el-col :span="24">
              <el-form-item label="有效时间：" prop="brand">
                <el-radio-group v-model="newLimitType" size="small" @change="limitTypeChange">
                  <div class="flex-column">
                    <div>
                      <el-radio :disabled="disabled" label="NON_LIMIT">长期有效</el-radio>
                    </div>
                    <div>
                      <el-radio :disabled="disabled" label="HAVE_LIMIT">有效期</el-radio>
                    </div>
                    <el-date-picker
                      v-if="newLimitType === 'HAVE_LIMIT' && !disabled"
                      v-model="form.activityValidityTime"
                      :disabled="disabled"
                      type="datetimerange"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      title: '',
      dialogVisible: false,
      params: {
      },
      list: [
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '永不过期',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        },
        {
          seq: 1,
          campaignName: '海信永不过期券商品-测试用',
          validTime: '2022-03-15 12:20 ~ 2022-10-15 12:20',
          appletURL: '/applet/url/home',
          h5ShortUrl: 'https://u.ibeeking.com/UeUdsDY',
          h5LongUrl: 'https://crm.ibeeking.com/#/marketting/pointsMall',
          createTime: '2022-03-12 11:20'
        }
      ],
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    refreshParams(params) {
      this.getList()
    },
    getList() {

    },
    synchronizePageList(type) {

    },
    openDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

<style>
</style>
